// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

// cSpell: ignore Heade

import { Button, TabWidget, Palette } from "std-widgets.slint";
import { Api, ComponentItem, DiagnosticSummary } from "api.slint";

import { EditorSizeSettings, EditorSpaceSettings, Icons, PickerStyles } from "./components/styling.slint";
import { StatusLine } from "./components/status-line.slint";
import { HeaderView } from "./views/header-view.slint";
import { LibraryView } from "./views/library-view.slint";
import { DrawAreaMode, PreviewView } from "./views/preview-view.slint";
import { OutOfDateBox } from "./components/out-of-date-box.slint";
import { PropertyView } from "./views/property-view.slint";
import { OutlineView } from "./views/outline-view.slint";
import { PreviewDataView } from "./views/preview-data-view.slint";
import { WindowGlobal, WindowManager } from "windowglobal.slint";
import { ColorPickerView } from "components/widgets/floating-brush-picker-widget.slint";
import { TableEditorView } from "components/spreadsheet-dialog.slint";
import "./assets/Inter-VariableFont.ttf";
import "./assets/SourceCodePro-Medium.ttf";
import { ConsolePanel } from "components/console-panel.slint";

export { Api }

export component PreviewUi inherits Window {
    property <length> border: 20px;
    property <ComponentItem> visible-component: {
        name: "",
        defined-at: "",
        pretty-location: "",
        is-user-defined: false,
        is-currently-shown: false,
    };
    property <bool> show-left-sidebar;
    property <bool> show-right-sidebar;
    property <bool> show-floating-widget <=> WindowManager.showing-color-picker;
    property <bool> show-floating-table-editor <=> WindowManager.showing-table-editor;
    property <bool> show-color-stop-picker <=> WindowManager.showing-color-stop-picker;
    property <length> initial-floating-x;

    title: @tr("Slint Live-Preview");
    icon: @image-url("assets/slint-logo-small-light.png");
    always-on-top <=> Api.always-on-top;

    MenuBar {
        Menu {
            title: @tr("File");
            MenuItem {
                title: @tr("Reload");
                activated => {
                    Api.reload-preview();
                }
            }
        }

        Menu {
            title: @tr("Edit");
            MenuItem {
                title: @tr("Undo");
                activated => {
                    Api.undo();
                }
            }

            MenuItem {
                title: @tr("Redo");
                activated => {
                    Api.redo();
                }
            }
        }

        Menu {
            title: @tr("Window");
            kot := MenuItem {
                title: @tr("Keep on Top");
                activated => {
                    Api.always-on-top = !Api.always-on-top;
                    if Api.always-on-top {
                        kot.title = @tr("Remove from Top");
                    } else {
                        kot.title = @tr("Keep on Top");
                    }
                }
            }
        }
    }

    Button {
        icon: Icons.sync;
        colorize-icon: true;
        clicked => {
            Api.reload-preview();
        }
    }

    init => {
        WindowGlobal.window-width = self.width;
        WindowGlobal.window-height = self.height;
        initial-floating-x = (self.width - PickerStyles.picker-width - 350px).max(0);
    }
    changed width => {
        WindowGlobal.window-width = self.width;
        initial-floating-x = (self.width - PickerStyles.picker-width - 350px).max(0);
    }
    changed height => {
        WindowGlobal.window-height = self.height;
    }

    VerticalLayout {
        if !Api.show-preview-ui: no-ui-drawing-rect := Rectangle {
            VerticalLayout {
                ComponentContainer {
                    component-factory: Api.preview-area;
                }
            }
        }
        if Api.show-preview-ui: Rectangle {
            VerticalLayout {
                header-view := HeaderView {
                    show-left-sidebar <=> root.show-left-sidebar;
                    show-right-sidebar <=> root.show-right-sidebar;

                    current-style <=> Api.current-style;
                    known-styles <=> Api.known-styles;

                    style-selected => {
                        Api.style-changed();
                    }
                    edit := Button {
                        icon: Icons.inspect;
                        colorize-icon: preview.select-mode ? false : true;
                        checkable: true;
                        checked <=> preview.select-mode;
                        primary: preview.select-mode;
                        enabled: preview.preview-is-current;
                    }
                }

                HorizontalLayout {
                    if  root.show-left-sidebar: LibraryView {
                        known-components: Api.known-components;

                        preview-area-is-current: preview.preview-is-current;
                        visible-component: root.visible-component;

                        show-preview-for(name, defined-at) => {
                            Api.show-preview-for(name, defined-at);
                        }
                    }

                    preview := PreviewView {
                        visible-component <=> root.visible-component;
                    }

                    if  root.show-right-sidebar: HorizontalLayout {
                        Rectangle {
                            width: 4px;
                            background: @linear-gradient(90deg, #0000, #0002);
                        }

                        VerticalLayout {
                            tw := TabWidget {
                                width: EditorSizeSettings.property-bar-width - (EditorSpaceSettings.default-padding * 2);
                                current-index: 0;
                                Tab {
                                    title: @tr("Properties");
                                    if tw.current-index == 0: Rectangle {
                                        property <float> ratio: 50%;
                                        w1 := PropertyView {
                                            y: 0;
                                            height: (parent.height - splitter.height) * ratio;
                                            opacity: preview.preview-is-current ? 1.0 : 0.3;
                                            enabled: preview.preview-is-current;
                                        }

                                        splitter := TouchArea {
                                            y: w1.height;
                                            height: 3px;
                                            moved => {
                                                ratio = Math.clamp((self.y + self.mouse-y - self.pressed-y) / (parent.height - splitter.height), 0, 1);
                                            }
                                            mouse-cursor: ns-resize;

                                            Rectangle {
                                                background: Palette.border;
                                            }
                                        }

                                        w2 := OutlineView {
                                            y: splitter.y + splitter.height;
                                            height: parent.height - self.y;
                                            opacity: preview.preview-is-current ? 1.0 : 0.3;
                                            enabled: preview.preview-is-current;
                                        }
                                    }
                                }

                                preview_data_tab := Tab {
                                    title: @tr("Data");
                                    if tw.current-index == 1: PreviewDataView {
                                        opacity: preview.preview-is-current ? 1.0 : 0.3;
                                        enabled: preview.preview-is-current;
                                    }
                                }
                            }
                        }
                    }
                }

                ConsolePanel { }

                StatusLine { }
            }
        }
    }

    if Api.diagnostic-summary == DiagnosticSummary.Errors: OutOfDateBox {
        x: (parent.width - self.width) / 2;
        y: (parent.height / 10);
    }

    if show-floating-table-editor || show-color-stop-picker || show-floating-widget: TouchArea {
        changed pressed => {
            WindowManager.hide-floating-widget();
        }
    }

    if show-floating-table-editor: TableEditorView {
        init => {
            self.initial-x = root.initial-floating-x;
            self.initial-y = 50px;
        }
    }

    if show-floating-widget: ColorPickerView {
        init => {
            self.initial-x = root.initial-floating-x;
            self.initial-y = 50px;
        }
        close => {
            WindowManager.hide-floating-color-widget();
        }
    }

    if show-color-stop-picker: ColorPickerView {

        color-stop-mode: true;

        init => {
            self.initial-x = root.initial-floating-x - 240px;
            self.initial-y = 50px;
        }
        close => {
            WindowManager.hide-color-stop-picker();
        }
    }
}
